<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="navtop">
			<u-navbar :background="{
		        background:'#0093dd'
		    }" :border-bottom="false" title-color="#fff" title="配送员" :isFixed="true" :isBack="false">
			</u-navbar>
		</view>

		<view class="avathor-box" v-if="user.id">
			<view class="bgtop"></view>
			<view class="ibox">
				<u-image :src="user.davatar || avaDefault" :errorIcon="avaDefault" border-radius="10" width="120" height="120"></u-image>
				<view class="info">
					<view class="name">
						<text style="margin-right: 5px;">
							{{user.dname}}
						</text>
						<u-tag  size="mini" type="success" text="配送员" mode="light" />
					</view>
					<view class="desc">
						手机号：{{user.dmobile}}
					</view>
					<view class="desc">
						所属供应站：{{user.siteName || '暂无分配'}}
					</view>
					<view class="num desc">
						
						<text style="margin-right: 20rpx;">实瓶数量：{{ info.shi ? info.shi.num : 0}}</text>
						<text>空瓶数量：{{ info.kong ? info.kong.num : 0}}</text>
					</view>
					<view class="out" @click="showExit=true">退出登录</view>
				</view>
			</view>
		</view>
		
		

		<view class="fixed-head">
			<view class="searchbox">
				<image src="/static/search.png" class="icon" mode="widthFix"></image>
				<input type="text" v-model="orderSn" class="input" placeholder="请输入收货人手机进行搜索">
				<view class="btn-search" @click="onSearch()">搜索</view>
			</view>
			<u-tabs :list="navlist" active-color="#0093dd" :is-scroll="false" :current="current"
				@change="change"></u-tabs>

		</view>


		<view class="order-list">
			<view class="order-item" v-for="(item, index) in list" :key="item.id">
				<!-- {{item.orderStatus}} -->
				<view class="order-head">
					<text class="num">下单时间：{{item.create_time}}</text>
                    <text class="num">{{item.consignee}}</text>
				</view>
				

				<view class="goods-list" @click="link(`/pages/user/order_info?id=${item.id}`)">
					<view class="goods-item" v-for="(goods, idx) in item.goods">
						<u-image :src="goods.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{goods.goods_name}}</view>
							<view class="attr">
								{{goods.description}}
							</view>
							<view class="pricebox">
								<view class="price">¥<text style="margin-left: 4px;">{{goods.goods_price}}</text></view>
								<view class="num">x{{goods.goods_number}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-foot">
					<view class="left">
						实际付款金额
						<text style="margin-left: 4px;">¥{{item.order_amount}}</text>
					</view>
					<view class="btnbox">
						<view class="btns" style="width: 164rpx;">
							<u-button class="btn" @click="link(`/pages/user/order_info?id=${item.id}`)" type="primary"
								:custom-style="btnStyle" size="medium">查看详情</u-button>
						</view>
					</view>
				</view>
			</view>


		</view>



		<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
			<u-empty slot="notdata" text="暂无数据" margin-top="100"></u-empty>
		</list-tip>


		<u-modal v-model="showExit" @confirm="confirmExit" :show-cancel-button="true" content="是否退出登录？"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				ready: false,
				navlist: [{
					name: '待配送',
					id: 1,
				}, {
					name: '已完成',
					id: 2,
				}, ],
				// 订单状态 1-待完成 2-已完成 3-已退款
				current: 0,
				btnStyle: {
					background: '#0093dd',
					borderRadius: '16px',
					padding: '0 15px',
				},
				list: [],
				listTip: {},
				orderSn: '',
				showExit: false,
				user: {},
				// avaDefault:this.$config.avaDefault,
				avaDefault:'/static/ava2.png',
				info:{},
			};
		},
		onLoad() {
			that = this;
		},
		onReady() {},
		onShow() {
			if (!this.userInfo) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			} else if(this.userInfo.dtype == 2){
				uni.redirectTo({
					url:'/pages/user/driver'
				});
				return
			}
			this.getUserInfo();
			this.$list.init(this);
			this.getList();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.$list.onReachBottom(this)
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			async confirmExit() {
				this.setUserInfo(null);
				uni.reLaunch({
					url: '/pages/login/login'
				})
				// console.log('confirmExit');
				// uni.showLoading()
				// let res = await this.$api.agencyAuthLogout();
				// uni.hideLoading();
				// if (res.data.code == this.$config.RESOK) {
				// 	this.setUserInfo(null);
				// 	this.$common.showTip(res.data.msg);
				// 	setTimeout(() => {
				// 		uni.reLaunch({
				// 			url: '/pages/login/login'
				// 		})
				// 	}, 2000)
				// } else {
				// 	this.$message.error(res.data.msg);
				// }
			},
			async getSite() {
				let res = await this.$api.siteDetail({
					id:this.userInfo.site_id,
				});
				if (res.data.code == this.$config.RESOK) {
					this.info = res.data.data;
				}
			},
			async getUserInfo() {
				try {
					let res = await this.$api.userInfo();
					if (res.data.code == this.$config.RESOK) {
						let user = this.$user.normalFilter(res.data.data)
						let userInfo = {
							...this.userInfo,
							...user,
						}
						this.user = userInfo
						this.setUserInfo(userInfo)
						this.ready = true
						this.getSite()
					} else{
						uni.removeStorageSync('userInfo')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				} catch (e) {
					//TODO handle the exception
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			onSearch() {
				this.$list.init(this);
				this.getList();
			},
			async getList() {
				let listTip = this.listTip;
				let res = {};
				let params = {
					pageNum: listTip.p,
					pageSize: listTip.size,
					status: this.navlist[this.current].id,
					order_sn:this.orderSn,
				};
				try {
					res = await this.$api.orderList(params);
				} catch (e) {
					uni.hideLoading();
					console.log('err', e);
				}
				if (res.data.code == this.$config.RESOK) {
					let list = res.data.data.data || [];
					list.forEach(item => {
						item.goods.forEach(goods => {
							// goods.image = this.$config.httpImgs + goods.image
						})
					})
					let setdata = this.$list.normalData(list, this);
					this.list = setdata.list;
					this.listTip = setdata.listTip;
					this.total = res.data.data.total;
					if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
						this.$list.notdata(this);
					}
				}
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.$list.init(this);
				this.getList();
			},
			handleTab(e) {
				// this.tab = e;
				// this.$list.init(this);
				// this.getList();
				this.tab = e;
				this.$list.init(this);
				this.$nextTick(() => {
					this.current = 0
					this.getList();
				})
			},
			...mapActions(['setUserInfo'])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.tab-wrap {
		display: flex;
		width: 100%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2px solid #eee;

		.tab-item {
			width: 50%;
			font-size: 16px;

			&.active {
				border-bottom: 4px solid $color;
				color: $color;
			}
		}
	}

	.fixed-head {
		padding: 20rpx 30rpx 0;
		background: #fff;
		// position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
		// border-bottom: 1px solid #ddd;
		// border-top: 1px solid #ddd;
		// border: 1px solid #ddd;
	}
	.searchbox {
		display: flex;
		height: 80rpx;
		align-items: center;
		background: #F6F8FB;
		padding: 0 20rpx;
		margin: 10rpx 0 0;
		border-radius: 5px;

		.icon {
			width: 20px;
			height: 20px;
		}

		.input {
			font-size: 15px;
			padding: 0 20rpx;
			flex: 1;
		}

		.btn-search {
			background: $color;
			color: #fff;
			border-radius: 5px;
			height: 60rpx;
			line-height: 60rpx;
			width: 120rpx;
			text-align: center;
		}
	}

	.h260 {
		height: 260rpx;
	}

	.order-list {
		padding: 20rpx 30rpx 0;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}
		}

		.btnbox {}
	}

	.avathor-box {
		position: relative;
		padding: 20rpx 30rpx 0;

		.bgtop {
			background: $color;
			width: 100%;
			height: 140rpx;
			border-radius: 0 0 0 70px;
			top: 0;
			left: 0;
			position: absolute;
		}

		.ibox {
			position: relative;
			width: 100%;
			z-index: 9;
			background: #fff;
			border-radius: 10px;
			display: flex;
			padding: 20rpx;
			box-shadow: 0 5px 5px #eee;
			justify-content: space-between;
			align-items: center;
		}
		.out{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 9;
			font-size: 13px;
			color: #666;
		}
		.info {
			width: 510rpx;
		}

		.name {
			font-size: 16px;
			color: #2C2C2C;
			font-weight: bold;
			margin-bottom: 2px;
		}

		.desc {
			font-size: 12px;
			color: #7E8187;
		}

		.btn {
			display: inline-block;
			font-size: 13px;
			background: $color;
			color: #fff;
			padding: 6px 12px;
			border-radius: 5px;
			margin: 5px 0 0;
		}
	}


	.order-list {
		padding: 20rpx 30rpx 0;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;

			&.package {
				background: #f1f7fd;
			}
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}
		}

		.btnbox {
			display: flex;

			.btns {
				margin-left: 5px;
			}
		}
	}


	.goods-list {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 10rpx 0;

		.goods-item {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;

			&:nth-last-child(1) {
				margin: 0;
			}
		}

		.info {
			flex: 1;
			width: 480rpx;
			padding-left: 20rpx;
		}

		.goods-name {
			line-height: 26px;
			font-size: 14px;
			font-weight: bold;
		}

		.attr {
			font-size: 12px;
			color: #979797;
			margin-bottom: 2px;
		}

		.price {
			font-size: 12px;
			color: $color-red;

			text {
				font-size: 15px;
			}
		}

		.desc {
			display: flex;
			justify-content: space-between;
		}
		.pricebox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			.num{
				font-size: 13px;
				color: #333;
			}
		}
	}
	
	
</style>